<template>
  <div>
    <a href="https://juejin.cn/post/7127925414885851144">组件二次封装</a>
    <h4>下面开始我们对 el-input-number 的封装：</h4>
    <div>
      基本封装:<Input1
        :value="inputOption.value"
        :controls="inputOption.controls"
        @input="inputChang"
      />
      <hr />
      $attrs “继承“ el-input-number 原有组件所有的 v-bind 属性 <br />
      $listeners “继承” el-input-number 原有组件所有 v-on 的事件<br />
      <Input1 v-bind="inputOption" @change="inputChang" />
      <br />
      插槽使用:
      <Input3>
        <el-select v-model="select" slot="prepend" placeholder="请选择">
          <el-option label="餐厅名" value="1"></el-option>
          <el-option label="订单号" value="2"></el-option>
          <el-option label="用户电话" value="3"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search"></el-button
      ></Input3>
    </div>
  </div>
</template>
 
<script>
import Input1 from "./components/input1.vue";
import Input2 from "./components/input2.vue";
import Input3 from "./components/input3.vue";

export default {
  name: "Cast",
  components: { Input1, Input2, Input3 },
  data() {
    return {
      inputOption: {
        value: 0,
        controls: true,
      },
      select: 1,
    };
  },
  methods: {
    inputChang(e) {
      console.log("input:", e);
    },
  },
};
</script>
 
<style scoped lang = "less">
</style>